<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>智慧建表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        /* 设置表头字体加粗 */
        .layui-table th {
            font-weight: bold;
        }

        /* 如果你只想设置某些特定列的对齐方式，可以使用更加具体的选择器 */
        .layui-table td:nth-child(4) {
            text-align: left !important; /* 只对第五列（实缴金额）右对齐 */
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div style="margin: 10px 0 5px 10px;">
        <button class="layui-btn" onclick="addTable()">添加报表</button>
        <button class="layui-btn layui-btn-normal">编辑报表</button>
        <button class="layui-btn layui-btn-danger">删除报表</button>
    </div>
    <!-- Tab 容器 -->
    <div class="layui-tab layui-tab-brief" lay-filter="tabDemo">
        <ul class="layui-tab-title">
            <li class="layui-this">沈阳市稽查系列各检查组入库情况表（1-10月）</li>
            <li>待定</li>
        </ul>
        <div class="layui-tab-content">
            <!-- 第一个选项卡内容 -->
            <div class="layui-tab-item layui-show">
                <!--沈阳市稽查系列各检查组入库情况表（1-10月） -->
                <table id="jcxlgjczrkqkTable" lay-filter="tableFilter"></table>
            </div>
            <!-- 第二个选项卡内容 -->
            <div class="layui-tab-item">
                <p>内容暂时为空白</p>
            </div>
        </div>
    </div>
</div>
<!-- 加载 Layui -->
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">
    //获取token
    const token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    const tokenQuery = token.replace("#", "%23");
    const element = layui.element;
    const table = layui.table;
    layui.config({
        base: '/'
    }).extend({
        eleTree: 'layui-ext/eleTree/eleTree',
        selectM: 'layui-ext/selectM/selectM'
    }).use(['element', 'table', 'laypage'], function () {
        // 初始化第一个选项卡的表格
        table.render({
            elem: '#jcxlgjczrkqkTable',
            id: 'jcxlgjczrkqkTable',
            contentType: 'application/json',
            height: 'full', // 表格高度占满父容器的高度
            page: true,
            limit: 20,   // 每页显示的条数为20条
            limits: [10, 20, 50, 100],  // 可以选择每页显示的条数
            headers: {
                "authorization": token
            }
            , url: '/statistics/queryJcxlgjczrkqk' //数据接口
            , method: 'POST',
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code,   // 解析接口状态
                    "msg": res.msg,     // 解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            },
            cols: [[ // 第一行（总表头）
                {title: '沈阳市稽查系列各检查组入库情况表（1-10月）', colspan: 5, align: 'center'}
            ], [
                {field: 'id', title: '序号', sort: true, width: '8%', align: 'center'},
                {field: 'dw', title: '单位', sort: false, width: '15%', align: 'center'},
                {field: 'jcks', title: '检查科室', sort: false, width: '15%', align: 'center'},
                {field: 'jcz', title: '检查组', sort: false, width: '40%', align: 'center'},
                {field: 'sjje', title: '实缴金额（万元）', sort: true, width: '22%', align: 'center'}
            ]],
        });

        // 监听选项卡切换事件（如果需要）
        element.on('tab(tabDemo)', function (data) {
            console.log('当前切换到选项卡：', data.index); // 输出当前索引
        })
    })

    function addTable() {
        layer.open({
            title: '在线调试'
            , content: '可以填写任意的layer代码'
        });
    }

</script>
</body>
</html>
